<template>
  <div class="login-container">
    <div class="login-box">
      <h1 style="font-size: 28px; text-align: center; color: #ffffff">容控助手后台</h1>
      <el-form ref="loginFormRef" :model="form" :rules="LoginRules" class="login-form">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
            v-model="form.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="form.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <div style="display: flex; gap: 12px">
            <el-input placeholder="请输入验证码" v-model="form.captcha"></el-input>
            <span v-html="svg_captcha" @click="getSvgCaptcha" style="width: 30%"></span>
          </div>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button type="info" @click="resetLoginForm">重置</el-button>
          <el-button type="primary" @click="login" @keyup.enter="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { commonRules } from '@/mixins/rules.js';
export default {
  mixins: [commonRules],
  data() {
    return {
      svg_captcha: null,
      // 登录表单的数据
      form: {
        username: 'admin',
        password: 'admin',
        captcha: '',
      },
      // 这是表单的验证规则对象
      LoginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
      },
    };
  },
  methods: {
    // 重置按钮
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { code, msg, data } = await this.$http.post('/api/login', this.form);
        if (code !== 0) {
          await this.getSvgCaptcha();
          return this.$message.error(msg);
        }
        this.$message.success('登录成功');
        localStorage.setItem('token', data.token);
        this.$router.push('/home');
      });
    },
    async getSvgCaptcha() {
      this.svg_captcha = await this.$http.get('/api/captcha/svg');
    },
  },
  async mounted() {
    if (localStorage.getItem('token')) {
      //   this.$message.success('您已登录'); // 跳转后不会消失
      return this.$router.push('/home');
    }
    await this.getSvgCaptcha();
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  background-color: #264a69;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 450px;
    height: 340px;
    box-shadow: 10px 10px 20px rgba(33, 44, 55, 0.3);
    border-radius: 10px;

    .avatar-box {
      width: 130px;
      height: 130px;
      padding: 10px;
      border-radius: 50%;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);

      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: aqua;
      }
    }
  }

  .login-form {
    box-sizing: border-box;
    background-color: #34495e;
    bottom: 0;
    width: 100%;
    padding: 22px 20px 0;

    .login-btn {
      display: flex;
      text-align: center;

      button {
        margin: 5px 0 20px 0;

        &:last-child {
          margin-left: 15px;
        }
      }
    }
  }
}

/* 鼠标进入 login 时的动画 */
@keyframes in {
  0% {
    width: 0;
    height: 0;
  }

  100% {
    width: 1200px;
    height: 1200px;
  }
}

/* 鼠标离开 login 时的动画 */
@keyframes out {
  0% {
    width: 1200px;
    height: 1200px;
  }

  100% {
    width: 0;
    height: 0;
  }
}
</style>
